表の罫線の表示方法を変更する
今週は、表の罫線の表示方法を変更する方法を紹介します。表の罫線は、border属性でその太さを指定できますが、frame属性やrules属性を使用すると、外枠の上下左右の罫線だけを表示したり、縦線や横線だけを表示したりすることが可能となります。

→ 表の外枠に表示する罫線を指定する
 
表の外枠について、その一部にだけ罫線を表示させる場合は、「TABLE」タグにframe属性を追加します。ここで指定できるframe属性の値は、以下のとおりです。
border : 上下左右の罫線すべて     box : 上下左右の罫線すべて     above : 上の罫線のみ
below : 下の罫線のみ     lhs : 左の罫線のみ     rhs : 右の罫線のみ
hsides : 上下の罫線のみ     vsides : 左右の罫線のみ     void : 上下左右の罫線なし
<HTML>
<HEAD>
  <TITLE>初めてのホームページ作成</TITLE>
</HEAD>

<BODY>
■frame="border"を指定した場合<BR>
<TABLE border="2" frame="border">
  <TR><TH>氏名</TH><TH>学年</TH><TH>担当</TH></TR>   <TR><TD>山田 健一</TD><TD>3</TD><TD>大道具</TD></TR>
  <TR><TD>鈴木 康子</TD><TD>2</TD><TD>美術</TD></TR>
  <TR><TD>常盤 真司</TD><TD>1</TD><TD>照明</TD></TR>
  <TR><TD>宮元 正子</TD><TD>2</TD><TD>衣装</TD></TR>
  <TR><TD>栗田 祐二</TD><TD>3</TD><TD>小道具</TD></TR>
</TABLE>
<BR>
<BR>
■frame="box"を指定した場合<BR>
<TABLE border="2" frame="box">
  <TR><TH>氏名</TH><TH>学年</TH><TH>担当</TH></TR>
  <TR><TD>山田 健一</TD><TD>3</TD><TD>大道具</TD></TR>
  <TR><TD>鈴木 康子</TD><TD>2</TD><TD>美術</TD></TR>
  <TR><TD>常盤 真司</TD><TD>1</TD><TD>照明</TD></TR>
  <TR><TD>宮元 正子</TD><TD>2</TD><TD>衣装</TD></TR>
  <TR><TD>栗田 祐二</TD><TD>3</TD><TD>小道具</TD></TR>
</TABLE>
<BR>
<BR>
■frame="above"を指定した場合<BR>
<TABLE border="2" frame="above">
  <TR><TH>氏名</TH><TH>学年</TH><TH>担当</TH></TR>
  <TR><TD>山田 健一</TD><TD>3</TD><TD>大道具</TD></TR>
  <TR><TD>鈴木 康子</TD><TD>2</TD><TD>美術</TD></TR>
  <TR><TD>常盤 真司</TD><TD>1</TD><TD>照明</TD></TR>
  <TR><TD>宮元 正子</TD><TD>2</TD><TD>衣装</TD></TR>
  <TR><TD>栗田 祐二</TD><TD>3</TD><TD>小道具</TD></TR>
</TABLE>
<BR>
<BR>
■frame="below"を指定した場合<BR>
<TABLE border="2" frame="below">
  <TR><TH>氏名</TH><TH>学年</TH><TH>担当</TH></TR>
  <TR><TD>山田 健一</TD><TD>3</TD><TD>大道具</TD></TR>
  <TR><TD>鈴木 康子</TD><TD>2</TD><TD>美術</TD></TR>
  <TR><TD>常盤 真司</TD><TD>1</TD><TD>照明</TD></TR>
  <TR><TD>宮元 正子</TD><TD>2</TD><TD>衣装</TD></TR>
  <TR><TD>栗田 祐二</TD><TD>3</TD><TD>小道具</TD></TR>
</TABLE>
<BR>
<BR>
■frame="lhs"を指定した場合<BR>
<TABLE border="2" frame="lhs">
  <TR><TH>氏名</TH><TH>学年</TH><TH>担当</TH></TR>
  <TR><TD>山田 健一</TD><TD>3</TD><TD>大道具</TD></TR>
  <TR><TD>鈴木 康子</TD><TD>2</TD><TD>美術</TD></TR>
  <TR><TD>常盤 真司</TD><TD>1</TD><TD>照明</TD></TR>
  <TR><TD>宮元 正子</TD><TD>2</TD><TD>衣装</TD></TR>
  <TR><TD>栗田 祐二</TD><TD>3</TD><TD>小道具</TD></TR>
</TABLE>
<BR>
<BR>
■frame="rhs"を指定した場合<BR>
<TABLE border="2" frame="rhs">
  <TR><TH>氏名</TH><TH>学年</TH><TH>担当</TH></TR>
  <TR><TD>山田 健一</TD><TD>3</TD><TD>大道具</TD></TR>
  <TR><TD>鈴木 康子</TD><TD>2</TD><TD>美術</TD></TR>
  <TR><TD>常盤 真司</TD><TD>1</TD><TD>照明</TD></TR>
  <TR><TD>宮元 正子</TD><TD>2</TD><TD>衣装</TD></TR>
  <TR><TD>栗田 祐二</TD><TD>3</TD><TD>小道具</TD></TR>
</TABLE>
<BR>
<BR>
■frame="hsides"を指定した場合<BR>
<TABLE border="2" frame="hsides">
  <TR><TH>氏名</TH><TH>学年</TH><TH>担当</TH></TR>
  <TR><TD>山田 健一</TD><TD>3</TD><TD>大道具</TD></TR>
  <TR><TD>鈴木 康子</TD><TD>2</TD><TD>美術</TD></TR>
  <TR><TD>常盤 真司</TD><TD>1</TD><TD>照明</TD></TR>
  <TR><TD>宮元 正子</TD><TD>2</TD><TD>衣装</TD></TR>
  <TR><TD>栗田 祐二</TD><TD>3</TD><TD>小道具</TD></TR>
</TABLE>
<BR>
<BR>
■frame="vsides"を指定した場合<BR>
<TABLE border="2" frame="vsides">
  <TR><TH>氏名</TH><TH>学年</TH><TH>担当</TH></TR>
  <TR><TD>山田 健一</TD><TD>3</TD><TD>大道具</TD></TR>
  <TR><TD>鈴木 康子</TD><TD>2</TD><TD>美術</TD></TR>
  <TR><TD>常盤 真司</TD><TD>1</TD><TD>照明</TD></TR>
  <TR><TD>宮元 正子</TD><TD>2</TD><TD>衣装</TD></TR>
  <TR><TD>栗田 祐二</TD><TD>3</TD><TD>小道具</TD></TR>
</TABLE>
<BR>
<BR>
■frame="void"を指定した場合<BR>
<TABLE border="2" frame="void">
  <TR><TH>氏名</TH><TH>学年</TH><TH>担当</TH></TR>
  <TR><TD>山田 健一</TD><TD>3</TD><TD>大道具</TD></TR>
  <TR><TD>鈴木 康子</TD><TD>2</TD><TD>美術</TD></TR>
  <TR><TD>常盤 真司</TD><TD>1</TD><TD>照明</TD></TR>
  <TR><TD>宮元 正子</TD><TD>2</TD><TD>衣装</TD></TR>
  <TR><TD>栗田 祐二</TD><TD>3</TD><TD>小道具</TD></TR>
</TABLE>

</BODY>

</HTML>


→ 表の内部に表示する罫線を指定する
 
表内のセルを区切る罫線の表示を変更する場合は、rules属性を「TABLE」タグに追加します。ここで指定できるrules属性の値は、以下のとおりです。
none : 罫線なし     rows : 横の罫線のみ     cols : 縦の罫線のみ     all : 縦/横の罫線すべて
<HTML>
<HEAD>
  <TITLE>初めてのホームページ作成</TITLE>
</HEAD>

<BODY>
■rules="none"を指定した場合<BR>
<TABLE border="2" rules="none">
  <TR><TH>氏名</TH><TH>学年</TH><TH>担当</TH></TR>
  <TR><TD>山田 健一</TD><TD>3</TD><TD>大道具</TD></TR>
  <TR><TD>鈴木 康子</TD><TD>2</TD><TD>美術</TD></TR>
  <TR><TD>常盤 真司</TD><TD>1</TD><TD>照明</TD></TR>
  <TR><TD>宮元 正子</TD><TD>2</TD><TD>衣装</TD></TR>
  <TR><TD>栗田 祐二</TD><TD>3</TD><TD>小道具</TD></TR>
</TABLE>
<BR>
<BR>
■rules="rows"を指定した場合<BR>
<TABLE border="2" rules="rows">
  <TR><TH>氏名</TH><TH>学年</TH><TH>担当</TH></TR>
  <TR><TD>山田 健一</TD><TD>3</TD><TD>大道具</TD></TR>
  <TR><TD>鈴木 康子</TD><TD>2</TD><TD>美術</TD></TR>
  <TR><TD>常盤 真司</TD><TD>1</TD><TD>照明</TD></TR>
  <TR><TD>宮元 正子</TD><TD>2</TD><TD>衣装</TD></TR>
  <TR><TD>栗田 祐二</TD><TD>3</TD><TD>小道具</TD></TR>
</TABLE>
<BR>
<BR>
■rules="cols"を指定した場合<BR>
<TABLE border="2" rules="cols">
  <TR><TH>氏名</TH><TH>学年</TH><TH>担当</TH></TR>
  <TR><TD>山田 健一</TD><TD>3</TD><TD>大道具</TD></TR>
  <TR><TD>鈴木 康子</TD><TD>2</TD><TD>美術</TD></TR>
  <TR><TD>常盤 真司</TD><TD>1</TD><TD>照明</TD></TR>
  <TR><TD>宮元 正子</TD><TD>2</TD><TD>衣装</TD></TR>
  <TR><TD>栗田 祐二</TD><TD>3</TD><TD>小道具</TD></TR>
</TABLE>
<BR>
<BR>
■rules="all"を指定した場合<BR>
<TABLE border="2" rules="all">
  <TR><TH>氏名</TH><TH>学年</TH><TH>担当</TH></TR>
  <TR><TD>山田 健一</TD><TD>3</TD><TD>大道具</TD></TR>
  <TR><TD>鈴木 康子</TD><TD>2</TD><TD>美術</TD></TR>
  <TR><TD>常盤 真司</TD><TD>1</TD><TD>照明</TD></TR>
  <TR><TD>宮元 正子</TD><TD>2</TD><TD>衣装</TD></TR>
  <TR><TD>栗田 祐二</TD><TD>3</TD><TD>小道具</TD></TR>
</TABLE>

</BODY>

</HTML>


G|Cg|C@Amazon Yahoo yV

z[y[W yVoC[UNLIMIT1~] COiq COsI